<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./fonts/fonts.css">
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">
  <script src="./js/index.js"></script>
  <title>携程网手机版</title>
</head>

<body>
  <div class="search-index">
    <div class="search-box">
      <div class="search-fonts">
        &#xe602;
      </div>
      <div class="search-content">
        搜索:目的地/酒店/景点/航班号
      </div>
    </div>
  </div>
  <div class="nav">
    <div class=" nav-index nav-right">
      <ul class="nav-content">
        <li><a href="#" class="nav-one">
            <span></span>
            <span>酒店</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>机票</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>火车票</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>旅游</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>攻略/景点</span>
          </a></li>
      </ul>
      <ul class="nav-content nav-content-two">
        <li><a href="#" class="nav-one">
            <span></span>
            <span>民宿/客栈</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>接送机/包车</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>汽车/船票</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>门票/活动</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>美食</span>
          </a></li>
      </ul>
      <ul class="nav-content nav-content-three">
        <li><a href="#" class="nav-one">
            <span></span>
            <span>特价/爆款</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>航班助手</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>租车</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>周边游</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>购物/免税</span>
          </a></li>
      </ul>
    </div>
    <div class=" nav-index nav-left ">
      <ul class="nav-content ">
        <li><a href="#" class="nav-one">
            <span></span>
            <span>向导/包车</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>保险</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>微领队</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>一日游</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>定制游</span>
          </a></li>
      </ul>
      <ul class="nav-content nav-left-two ">
        <li><a href="#" class="nav-one">
            <span></span>
            <span>邮轮游</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>外币兑换</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>签证</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>WiFi电话卡</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>行李寄送</span>
          </a></li>
      </ul>
      <ul class="nav-content nav-left-three">
        <li><a href="#" class="nav-one">
            <span></span>
            <span>旅拍·跟拍</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>拿去花</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>礼品卡</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>信用卡</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>会员/签到</span>
          </a></li>
      </ul>
      <ul class="nav-content nav-left-four">
        <li><a href="#" class="nav-one">
            <span></span>
            <span>超级会员</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>会员商城</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>携程小诗机</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>紧急支援</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>加盟合作</span>
          </a></li>
      </ul>
      <ul class="nav-content nav-left-five">
        <li><a href="#" class="nav-one">
            <span></span>
            <span>公司会务</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>企业商旅</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>核酸检测</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>Trip.com</span>
          </a></li>
        <li><a href="#" class="nav-one">
            <span></span>
            <span>Trip.com</span>
          </a></li>
      </ul>
    </div>
  </div>
  <div class="dot">
    <ul class="dot-all">
      <li class="dot-current-left"></li>
      <li></li>
    </ul>
  </div>
  <div class="content">
    <div class="content-left">
      <div class="content-left-title">
        <div class="content-left-special"><img src="./images/tejia.png" alt=""></div>
        <div class="content-left-live">特价好货直播中</div>
      </div>
      <div class="content-left-img">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="#">
                <img src="./images/swiper1.jpg" alt="">
                <div class="tag">酒店套餐</div>
                <div class="product">义乌环球酒店2晚</div>
                <div class="block-footer">
                </div>
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#"><img src="./images/swiper2.jpg" alt="">
                <div class="tag">酒店套餐</div>
                <div class="product">南京香格里拉大酒店1晚</div>
              </a>

            </div>
            <div class="swiper-slide">
              <a href="#"><img src="./images/swiper3.jpg" alt="">
                <div class="tag">酒店套餐</div>
                <div class="product">义乌环球酒店2晚</div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-right">1</div>
  </div>
  <script src="js/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

    });
    var mySwiper = new Swiper('.swiper', {
      autoplay: true,//等同于以下设置
      /*autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
        },*/
    });
  </script>
</body>

</html>